<template>
	<view class="container" :style="{'background-image': 'url('+debris_back+')'}">
		<view class="title-view">
			<view class="record normal" @click="toRecord">合成记录</view>
			<view class="title">碎片合成</view>
			<view class="rules normal" @click="toRules">玩法规则</view>
		</view>
		<scroll-view class="list" scroll-y @scrolltolower="getMoreData">
			<view class="inner">
				<view v-for="(item,index) in conflateList" :key="index" class="conflate-item">
					<view class="time">{{'活动时间' + item.start_time + ' 至 ' + item.end_time}}</view>
					<view class="content">
						<image :src="item.image" class="img-class"></image>
						<view class="info">
							<view class="name">{{item.name}}</view>
							<view>
								<text class="text_1">剩余</text>
								<text class="text_2">{{item.stock + '个'}}</text>
								<text class="text_3">{{'/' + item.sales + '个'}}</text>
								<text class="text_1">已合成</text>
							</view>
							<view class="price-view">
								<view class="price-class">{{'￥' + item.price}}</view>
								<view class="btn" @click="toDetail(item)">去合成</view>
							</view>
						</view>
					</view>
					<view class="progress">
						<view class="p-title">进度</view>
						<view class="line">
							<view class="inner-line" :style="{'width': item.progress * 100 + '%'}"></view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { DebrisImg } from '../../utils/objectValue';
	import { getConflateList } from '@/api/conflate.js'

	export default {
		components: {},
		props: {},
		data() {
			return {
				debris_back: DebrisImg.bg,
				conflateList: [],
				page: 1,
				lastPage: 1,
			}
		},
		watch: {},
		computed: {},
		onShow() {
			this.page = 1;
			this.getConflateList();
		},
		methods: {
			getConflateList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				const params = {
					page: this.page,
					limit: 10
				};
				getConflateList(params).then((res) => {
					uni.hideLoading();
					const {code, data} = res;
					if(code == 0) {
						this.lastPage = data.last_page;
						if(this.page == 1){
							this.conflateList = data.data;
						}else{
							this.conflateList = [...this.conflateList, ...data.data];
						}
					}
				}).catch((err) => {
					uni.hideLoading();
				});
			},
			getMoreData() {
				if (this.page < this.lastPage) {
					this.page++;
					this.getConflateList();
				}
			},
			toDetail(item) {
				uni.navigateTo({
					url: `/plugins/conflate-detail/index?id=${item.id}`
				});
			},
			toRecord() {
				uni.navigateTo({
					url: `/plugins/conflate-record/index`
				});
			},
			toRules() {
				uni.navigateTo({
					url: '/plugins/conflate/play-rules/play-rules'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		/* #ifdef MP-WEIXIN || APP-PLUS */
		height: 100vh;
		/* #endif */
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		background-size: 100% 100%;

		.title-view{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.record{
			width: 200rpx;
			height: 58rpx;
			background: #9F26FD;
			border-radius: 0 52rpx 52rpx 0;
		}
		.rules{
			width: 200rpx;
			height: 58rpx;
			background: #9F26FD;
			border-radius: 52rpx 0 0 52rpx;
		}
		.normal{
			font-size: 28rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			color: #FFFFFF;
			line-height: 52rpx;
			text-align: center;
			font-weight: 500;
		}
		.title{
			width: 100%;
			height: 120rpx;
			font-size: 56rpx;
			font-family: BTH;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 120rpx;
		}
		.list{
			width: 100%;
			height: calc(100% - 130rpx);
			padding: 20rpx;
		}
		.inner{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.conflate-item {
			width: 678rpx;
			height: 376rpx;
			background: #FFFFFF;
			margin-top: 30rpx;
			padding: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
		.time {
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			text-align: center;
		}
		.content{
			display: flex;
			align-items: center;
			justify-content: space-around;
			.img-class{
				width: 208rpx;
				height: 200rpx;
			}
			.info{
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			.info>view{
				margin-top: 14rpx;
			}
			.name{
				font-size: 40rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #181818;
			}
			.text_1{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #202020;
			}
			.text_2{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #900CF3;
			}
			.text_3{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #C797FF;
			}
			.price-view{
				display: flex;
				align-items: center;
			}
			.price-class{
				font-size: 36rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #900CF3;
			}
			.btn{
				width: 144rpx;
				height: 62rpx;
				background: #900CF3;
				border-radius: 0px 0px 0px 0px;
				opacity: 1;
				text-align: center;
				line-height: 62rpx;
				color: #FFFFFF;
				font-size: 28rpx;
				margin-left: 40rpx;
			}
		}
		.progress{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			.p-title{
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
			.line{
				width: 520rpx;
				height: 20rpx;
				background-color: rgba(144, 12, 243, 0.16);
				border-radius: 4rpx;
				overflow: hidden;
			}
			.inner-line{
				height: 20rpx;
				border-radius: 4rpx;
				background-color: rgba(144, 12, 243, 1);
			}
		}
	}
</style>